<template>
	<view>
		<view class='order-details u-skeleton'
			:style="{paddingBottom: showAddress && orderInfo.shippingType==1 ? '120rpx' : ''}">
			<view class='wrapper'>
				<view class="title">{{$t('order.orderInformation')}}</view>
				<!--订单信息-->
				<view class='item acea-row row-between u-skeleton-rect'>
					<view>{{$t('order.orderNumber')}}：</view>
					<!--订单编号-->
					<view class='conter acea-row row-middle row-right'>{{orderInfo.orderId}}
						<text class='copy' @click='copy(orderInfo.orderId)'>{{$t('order.copy')}}</text>
						<!--复制-->
					</view>
				</view>
				<view class='item acea-row row-between u-skeleton-rect'>
					<view>{{$t('order.orderTime')}}：</view>
					<!--下单时间-->
					<view class='conter'>{{orderInfo.createTime}}</view>
				</view>
				<view class='item acea-row row-between u-skeleton-rect'>
					<view>{{$t('order.orderUser')}}：</view>
					<!--下单用户-->
					<view class='conter'>{{orderInfo.orderCreateName || '---'}}</view>
				</view>
				<view class='item acea-row row-between u-skeleton-rect'>
					<view>{{$t('order.promoter')}}：</view>
					<!--推广人-->
					<view class='conter'>{{orderInfo.spreadInfo.id + ' / ' +orderInfo.spreadInfo.name}}</view>
				</view>
				<view class='item acea-row row-between u-skeleton-rect'>
					<view>{{$t('order.orderType')}}：</view>
					<!--订单类型-->
					<view class='conter'>{{orderInfo.shippingType==1?$t('order.expressOrder'):$t('order.pickUpOrder')}}
					</view>
				</view>
				<view class='item acea-row row-between u-skeleton-rect'>
					<view>{{$t('order.theTotalAmountOfOrders')}}：</view>
					<!--订单总金额-->
					<view class='conter'>{{(Number(orderInfo.totalPrice)+Number(orderInfo.payPostage)).toFixed(2)}}
					</view>
				</view>
				<view class='item acea-row row-between u-skeleton-rect'>
					<view>{{$t('order.totalAmountOfGoods')}}：</view>
					<!--商品总金额-->
					<view class='conter'>{{orderInfo.totalPrice}}</view>
				</view>
				<view class='item acea-row row-between u-skeleton-rect'>
					<view>{{$t('order.shippingTax')}}：</view>
					<!--运税费-->
					<view class='conter'>{{orderInfo.payPostage}}</view>
				</view>
				<view class='item acea-row row-between u-skeleton-rect' v-if="orderInfo.receiptVoucher">
					<view>{{$t('order.paymentVoucher')}}：</view>
					<!--支付凭证-->
					<view class='conter'>
						<u-image width="100rpx" height="100rpx" @click="yulan(orderInfo.receiptVoucher)"
							:src="orderInfo.receiptVoucher"></u-image>
					</view>
				</view>
				<view class='item acea-row row-between u-skeleton-rect'>
					<view>{{$t('order.levelMember')}}：</view>
					<!--等级会员-->
					<view class='conter'>{{orderInfo.levelName || '---'}}</view>
				</view>
			</view>
			<view class='wrapper'>
				<view class="title">{{$t('order.recipientInformation')}}</view>
				<!--收货人信息-->
				<view class="u-skeleton-rect">
					<view style="font-weight: bold;">
						<text>{{orderInfo.realName}}</text>
						<text
							style="margin-left: 40rpx;">{{orderInfo.userPhone.substring(orderInfo.userPhone.indexOf('|')+1,orderInfo.userPhone.length)}}</text>
					</view>
					<view style="color: #6D7278;margin-top: 8rpx;">{{orderInfo.userAddress}}</view>
				</view>
			</view>
			<orderGoods :evaluate='orderInfo.status' :orderId="order_id" :ids="orderInfo.id" :uniId="orderInfo.uid"
				:cartInfo="orderInfo.productList" :jump="true" :type="type" :couponPrice="orderInfo.couponPrice"
				:isZiti="orderInfo.shippingType==2" :isDetail="true" @refund="refund"></orderGoods>
			<view class='wrapper'>
				<view class="title">{{$t('order.paymentMethod')}}</view>
				<!--支付方式-->
				<view class='item acea-row row-between'>
					<view>{{$t('order.paymentTime')}}：</view>
					<!--支付时间-->
					<view class='conter'>{{orderInfo.payTime || '-/-'}}</view>
				</view>
				<view class='item acea-row row-between'>
					<view>{{$t('order.paymentMethod')}}：</view>
					<!--支付方式-->
					<view class='conter'>
						{{$t(`order.${orderInfo.payTypeStr}`)}}
						<span v-if="$util.moneyChange(orderInfo.deductionPrice|| 0)!=0"
							style="margin-left: 10rpx;">{{$t('order.pointsDeduction')}}</span>
						<!--积分抵扣-->
						<span v-if="$util.moneyChange(orderInfo.couponPrice|| 0)!=0"
							style="margin-left: 10rpx;">{{$t('order.couponDeduction')}}</span>
						<!--优惠券抵扣-->
					</view>
				</view>
				<view class='item acea-row row-between'>
					<view>{{$t('order.paymentAmount')}}：</view>
					<!--支付金额-->
					<view class='conter'>{{orderInfo.payPrice || "-/-"}}</view>
				</view>
				<view class='item acea-row row-between'>
					<view>{{$t('order.paymentAccount')}}：</view>
					<!--支付账号-->
					<view class='conter'>{{'-/-'}}</view>
				</view>
				<block v-if="$util.moneyChange(orderInfo.deductionPrice)">
					<view class='item acea-row row-between'>
						<view>{{$t('order.pointsDeduction')}}：</view>
						<!--积分抵扣-->
						<view class='conter'>{{orderInfo.deductionPrice ||"-/-"}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>{{$t('order.usePoints')}}：</view>
						<!--使用积分数-->
						<view class='conter'>{{orderInfo.useIntegral ||"-/-"}}</view>
					</view>
				</block>
				<block v-if="$util.moneyChange(orderInfo.couponPrice)">
					<view class='item acea-row row-between'>
						<view>{{$t('order.useCoupons')}}：</view>
						<!--使用优惠券-->
						<view class='conter'>{{orderInfo.couponName ||"-/-"}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>{{$t('order.couponDeductionAmount')}}：</view>
						<!--优惠券抵扣金额-->
						<view class='conter'>{{orderInfo.couponPrice ||"-/-"}}</view>
					</view>
				</block>
				<view class='item acea-row row-between'>
					<view>{{$t('order.memberDiscountAmount')}}：</view>
					<!--会员折扣金额-->
					<view class='conter'>{{$util.moneyChange(orderInfo.vipReducePrice)!=0?$util.moneyChange(orderInfo.vipReducePrice):'-/-'}}</view>
				</view>
				<view class='item acea-row row-between'>
					<view>{{$t('order.activityDiscountAmount')}}：</view>
					<!--活动优惠金额-->
					<view class='conter'>{{$util.moneyChange(orderInfo.activityTotalDiscount)||'-/-'}}</view>
				</view>
			</view>

		</view>

		<view class="fixedBar" v-if="showAddress && orderInfo.shippingType==1">
			<view></view>
			<view class="edit-addr" @click="editAddress">{{$t('order.changeAddress')}}</view>
			<!--修改地址-->
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>


<script>
	import {
		orderDetailApi,
	} from '@/api/order.js';
	import {
		openOrderRefundSubscribe
	} from '@/utils/SubscribeMessage.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import orderGoods from "@/components/orderGoods";
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";

	import {
		mapGetters
	} from "vuex";
	const app = getApp();
	export default {
		components: {
			orderGoods,
		},
		data() {
			return {
				order_id: '',
				type: '',
				cartInfo: [], //购物袋产品
				orderInfo: {
					userPhone: '',
					productList: [],
					status: 0,
					id: 0,
					payTypeStr:''
				}, //订单详情
				system_store: {},
				isGoodsReturn: false, //是否为退款订单
				totalPrice: '0',

				id: 0, //订单id
				uniId: '',
				appletType: uni.getStorageSync("appletType"),
				isEditPhone: false,
				newPhone: "", //修改后手机号
				showAddress: false, //是否显示地址

				loading: true,
				already: false, // 是否编辑过
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad: function(options) {
			if (!options.order_id) return this.$util.Tips({
				title: '缺少参数'
			}, {
				tab: 3,
				url: 1
			});
			this.$set(this, 'order_id', options.order_id);
			this.$set(this, 'type', options.type);
			this.getOrderInfo()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.orderDetails')
			});
		},
		methods: {
			/**
			 * 拨打电话
			 */
			makePhone: function() {
				uni.makePhoneCall({
					phoneNumber: this.system_store.phone
				})
			},

			/**
			 * 获取订单详细信息
			 * 
			 */
			getOrderInfo: function() {
				let _this = this;
				uni.showLoading({
					title: _this.$t('order.loading')
				});
				orderDetailApi({
					id: _this.order_id
				}).then(res => {
					uni.hideLoading();
					console.log(res.data)
					_this.orderInfo = res.data
					_this.showAddress = false;
					if (res.data.status == 0) {
						_this.showAddress = true;
					}
					if (res.data.status == 6 || res.data.status == -2) {
						_this.showAddress = true;
						for (let i of res.data.productList) {
							if (i.isEurope != 1) {
								_this.showAddress = false;
								break;
							}
						}
					}
					_this.loading = false
				}).catch(err => {
					console.info(err)
					uni.hideLoading();
					_this.$util.Tips({
						title: err
					}, {tab:3});
				});
			},
			editAddress() {
				var _this = this
				var address = [];
				var phone = this.orderInfo.userPhone;
				address.push(this.orderInfo.province);
				address.push(this.orderInfo.city);
				address.push(this.orderInfo.district);
				var obj = {
					address,
					userPhone: phone.indexOf(" ") == -1 ? phone : phone.split(" ")[1],
					id: this.orderInfo.id,
					realName: this.orderInfo.realName,
					detail: this.orderInfo.detail,
					idCard: this.orderInfo.idCard,
					areaType: this.orderInfo.areaType,
				}
				uni.navigateTo({
					url: `../user_address/index`,
					events: {
						acceptDataFromOpenedPage: function(data) {
							_this.getOrderInfo()
						},
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('addressInfo', {
							data: obj
						})
					}
				})
			},
			refund(id) {
				if (id) {
					this.order_id = id
				}
				this.already = true
				this.getOrderInfo()
			},
			/**
			 * 
			 * 剪切订单号
			 */
			// #ifndef H5
			copy: function(val) {
				var _this = this
				uni.setClipboardData({
					data: val,
					showToast: false,
					success: function() {
						uni.showToast({
							title: _this.$t('order.copySuccessfully'),
							duration: 2000
						});
					}
				});
			},
			// #endif
			yulan(e) {
				console.info(e)
				uni.previewImage({
					urls: [e],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		},
		beforeDestroy() {
			// 有操作的话返回刷新订单列表
			if (this.already) {
				// #ifdef APP-NVUE
				const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
				// #endif
				// #ifndef APP-NVUE
				const eventChannel = this.getOpenerEventChannel();
				// #endif
				eventChannel.emit('acceptDataFromOpenedPage', {
					data: ''
				});
			}
		},

	}
</script>

<style scoped lang="scss">
	.wx_card {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		background-color: rgba(0, 0, 0, 0.3);

		.wx_code {
			width: 568rpx;
			background-color: #FFFFFF;
			border-radius: 4rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			box-shadow: 0 10px 20px 0 rgba(4, 0, 0, .1);
			text-align: center;

			.iconguanbi1 {
				color: rgba(34, 34, 34, 1);
				font-size: 24rpx;
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				padding: 24rpx;
			}

			.code_er {
				padding-top: 83rpx;

				image {
					width: 300rpx;
					height: 300rpx;
				}
			}

			.add_tips {
				padding: 40rpx 0 60rpx;
				font-size: 26rpx;
				color: rgba(34, 34, 34, 1);
			}
		}
	}

	.qs-btn {
		width: auto;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 4rpx;
		font-size: 27rpx;
		padding: 0 3%;
		color: #222;
		border: 1px solid #222;
		margin-right: 20rpx;
	}


	.order-details .header {
		padding: 0 30rpx;
		height: 150rpx;
		background-color: #222;
		display: flex;
		justify-content: space-between;
	}

	.order-details .header.on {
		background-color: #666 !important;
	}

	.order-details .header .pictrue {
		width: 100rpx;
		height: 100rpx;
	}

	.order-details .header .pictrue image {
		width: 100%;
		height: 100%;
	}

	.order-details .header .data {
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
		margin-left: 27rpx;
	}

	.order-details .header .data.on {
		margin-left: 0;
	}

	.order-details .header .data .state {
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 7rpx;
	}

	.order-details .header .data .time {
		margin-left: 20rpx;
	}

	.order-details .address {
		background-color: #fff;
		margin-top: 13rpx;
		padding-top: 20rpx;
	}

	.order-details .address .addressBox {
		padding: 15rpx 30rpx 35rpx;
		font-size: 26rpx;
		color: #868686;
	}

	.order-details .address .zitiTitle {
		padding: 0 30rpx;
		font-size: 30rpx;
		border-bottom: 2rpx solid #EEEEEE;
		padding-bottom: 10rpx;
	}

	.order-details .address .name {
		font-size: 30rpx;
		color: #282828;
		margin-bottom: 15rpx;
	}

	.order-details .address .name .phone {
		margin-left: 40rpx;
	}

	.order-details .line {
		width: 100%;
		height: 3rpx;
	}

	.order-details .line image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.order-details .wrapper {
		background-color: #fff;
		margin-top: 12rpx;
		padding: 30rpx;
	}

	.order-details .wrapper .title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.order-details .wrapper .item {
		font-size: 28rpx;
		color: #282828;
	}

	.order-details .wrapper .item~.item {
		margin-top: 14rpx;
	}

	.order-details .wrapper .item .conter {
		color: #868686;
		// width: 500rpx;
		text-align: right;
	}

	.order-details .wrapper .item .conter .copy {
		font-size: 20rpx;
		color: #333;
		border-radius: 30rpx;
		border: 1rpx solid #666;
		padding: 3rpx 15rpx 5rpx;
		margin-left: 24rpx;
		font-weight: bold;
	}

	.order-details .wrapper .item .ouyuancopy {
		font-size: 20rpx;
		color: #333;
		border-radius: 30rpx;
		border: 1rpx solid #666;
		padding: 6rpx 15rpx 7rpx;
		font-weight: bold;
	}

	.order-details .wrapper .actualPay {
		border-top: 1rpx solid #eee;
		margin-top: 30rpx;
		padding-top: 30rpx;
	}

	.order-details .wrapper .actualPay .money {
		font-weight: bold;
		font-size: 30rpx;
	}

	.order-details .footer {
		width: 100%;
		// height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.order-details .footer .bnt {
		width: 176rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 4rpx;
		color: #fff;
		font-size: 27rpx;
	}

	.order-details .footer .bnt.cancel {
		color: #222;
		border: 1rpx solid #222;
	}

	.order-details .footer .bnt~.bnt {
		margin-left: 18rpx;
	}

	.order-details .address .name .iconfont {
		font-size: 34rpx;
		margin-left: 10rpx;
	}

	.refund {
		padding: 0 30rpx 30rpx;
		margin-top: 24rpx;
		background-color: #fff;

		.title {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #333;
			height: 86rpx;
			border-bottom: 1px solid #f5f5f5;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.con {
			padding-top: 25rpx;
			font-size: 28rpx;
			color: #868686;
		}
	}

	.marginL10 {
		margin-left: 20rpx;
	}

	.tiphone {
		display: flex;
		justify-content: center;
	}

	.u-content {
		font-size: 26rpx;
		line-height: 1.7;
		padding: 30rpx;

	}

	.fixedBar {
		position: fixed;
		z-index: 9;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 10rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid #EEEEEE;

		.edit-addr {
			background-color: #111111;
			color: #FFFFFF;
			padding: 20rpx;
		}
	}
</style>
